<!doctype html>
<html>
<head>
   <meta charset="UTF-8">
   <link href="style.css" rel="stylesheet" type="text/css" />
   <title>手机APP</title>
</head>
<body>
<script type="text/javascript" language="javascript">
    function imgUser_onclick(){
        var index=document.getElementById("index");
        var infomation=document.getElementById("infomation");
        var exercise=document.getElementById("exercise");
        var login=document.getElementById("login");
        var register=document.getElementById("register");
        var cet4=document.getElementById("cet4");
        var cet6=document.getElementById("cet6");
        var professional_4=document.getElementById("professional-4");
        var reward=document.getElementById("reward");
        var IELTS=document.getElementById("IELTS");
        var TOEFL=document.getElementById("TOEFL");
        var more=document.getElementById("more");
        var JLPT=document.getElementById("JLPT");
        var Jtest=document.getElementById("Jtest");
        var search=document.getElementById("search");
        var search_result=document.getElementById("search_result");
        var score=document.getElementById("score");
        infomation.style.display="block";
        exercise.style.display="none";
        login.style.display="none";
        register.style.display="none";
        cet4.style.display="none";
        cet6.style.display="none";
        professional_4.style.display="none";
        reward.style.display="none";
        IELTS.style.display="none";
        TOEFL.style.display="none";
        more.style.display="none";
        index.style.display="none";
        JLPT.style.display="none";
        Jtest.style.display="none";
        search.style.display="none";
        search_result.style.display="none";
        score.style.display="none";
    }
    
    function btnRegister_onclick(){
        var login=document.getElementById("login");
        var register=document.getElementById("register");
        login.style.display="none";
        register.style.display="block";
    }
    
    function btnSure_onclick(){
        var login=document.getElementById("login");
        var index=document.getElementById("index");
        login.style.display="none";
        index.style.display="block";
    }
    
    function btnConfirm_onclick(){
        var register=document.getElementById("register");
        var login=document.getElementById("login");
        register.style.display="none";
        login.style.display="block";
    }
    
    function btnLogin_onclick(){
        var infomation=document.getElementById("infomation");
        var login=document.getElementById("login");
        infomation.style.display="none";
        login.style.display="block";
    }
    
    function imgIndex_onclick(){
        var index=document.getElementById("index");
        var infomation=document.getElementById("infomation");
        var exercise=document.getElementById("exercise");
        var login=document.getElementById("login");
        var register=document.getElementById("register");
        var cet4=document.getElementById("cet4");
        var cet6=document.getElementById("cet6");
        var professional_4=document.getElementById("professional-4");
        var reward=document.getElementById("reward");
        var IELTS=document.getElementById("IELTS");
        var TOEFL=document.getElementById("TOEFL");
        var more=document.getElementById("more");
        var JLPT=document.getElementById("JLPT");
        var Jtest=document.getElementById("Jtest");
        var search=document.getElementById("search");
        var search_result=document.getElementById("search_result");
        var score=document.getElementById("score");
        infomation.style.display="none";
        exercise.style.display="none";
        login.style.display="none";
        register.style.display="none";
        cet4.style.display="none";
        cet6.style.display="none";
        professional_4.style.display="none";
        reward.style.display="none";
        IELTS.style.display="none";
        TOEFL.style.display="none";
        more.style.display="none";
        index.style.display="block";
        JLPT.style.display="none";
        Jtest.style.display="none";
        search.style.display="none";
        search_result.style.display="none";
        score.style.display="none";
    }
    
    function imgMore_onclick(){
        var index=document.getElementById("index");
        var infomation=document.getElementById("infomation");
        var exercise=document.getElementById("exercise");
        var login=document.getElementById("login");
        var register=document.getElementById("register");
        var cet4=document.getElementById("cet4");
        var cet6=document.getElementById("cet6");
        var professional_4=document.getElementById("professional-4");
        var reward=document.getElementById("reward");
        var IELTS=document.getElementById("IELTS");
        var TOEFL=document.getElementById("TOEFL");
        var more=document.getElementById("more");
        var JLPT=document.getElementById("JLPT");
        var Jtest=document.getElementById("Jtest");
        var search=document.getElementById("search");
        var search_result=document.getElementById("search_result");
        var score=document.getElementById("score");
        infomation.style.display="none";
        exercise.style.display="none";
        login.style.display="none";
        register.style.display="none";
        cet4.style.display="none";
        cet6.style.display="none";
        professional_4.style.display="none";
        reward.style.display="none";
        IELTS.style.display="none";
        TOEFL.style.display="none";
        more.style.display="block";
        index.style.display="none";
        JLPT.style.display="none";
        Jtest.style.display="none";
        search.style.display="none";
        search_result.style.display="none";
        score.style.display="none";
    }
    
    function li1_onclick(){
        var more=document.getElementById("more");
        var cet4=document.getElementById("cet4");
        more.style.display="none";
        cet4.style.display="block";
    }
    
    function li2_onclick(){
        var more=document.getElementById("more");
        var cet6=document.getElementById("cet6");
        more.style.display="none";
        cet6.style.display="block";
    }
    
    function li3_onclick(){
        var more=document.getElementById("more");
        var pro_4=document.getElementById("professional-4");
        more.style.display="none";
        pro_4.style.display="block";
    }
    
    function li4_onclick(){
        var more=document.getElementById("more");
        var reward=document.getElementById("reward");
        more.style.display="none";
        reward.style.display="block";
    }
    
    function li5_onclick(){
        var more=document.getElementById("more");
        var IELTS=document.getElementById("IELTS");
        more.style.display="none";
        IELTS.style.display="block";
    }
    
    function li6_onclick(){
        var more=document.getElementById("more");
        var TOEFL=document.getElementById("TOEFL");
        more.style.display="none";
        TOEFL.style.display="block";
    }
    
    function li7_onclick(){
        var more=document.getElementById("more");
        var JLPT=document.getElementById("JLPT");
        more.style.display="none";
        JLPT.style.display="block";
    }
    
    function li8_onclick(){
        var more=document.getElementById("more");
        var Jtest=document.getElementById("Jtest");
        more.style.display="none";
        Jtest.style.display="block";
    }
    
    function paper_onclick(){
        var index=document.getElementById("index");
        var exercise=document.getElementById("exercise");
        index.style.display="none";
        exercise.style.display="block";
    }
    
    function imgSearch_onclick(){
        var index=document.getElementById("index");
        var infomation=document.getElementById("infomation");
        var exercise=document.getElementById("exercise");
        var login=document.getElementById("login");
        var register=document.getElementById("register");
        var cet4=document.getElementById("cet4");
        var cet6=document.getElementById("cet6");
        var professional_4=document.getElementById("professional-4");
        var reward=document.getElementById("reward");
        var IELTS=document.getElementById("IELTS");
        var TOEFL=document.getElementById("TOEFL");
        var more=document.getElementById("more");
        var JLPT=document.getElementById("JLPT");
        var Jtest=document.getElementById("Jtest");
        var search=document.getElementById("search");
        var search_result=document.getElementById("search_result");
        var score=document.getElementById("score");
        infomation.style.display="none";
        exercise.style.display="none";
        login.style.display="none";
        register.style.display="none";
        cet4.style.display="none";
        cet6.style.display="none";
        professional_4.style.display="none";
        reward.style.display="none";
        IELTS.style.display="none";
        TOEFL.style.display="none";
        more.style.display="none";
        index.style.display="none";
        JLPT.style.display="none";
        Jtest.style.display="none";
        search.style.display="block";
        search_result.style.display="none";
        score.style.display="none";
    }
    
    function search_onclick(){
        var search_result=document.getElementById("search_result");
        search_result.style.display="block";
    }
    
    function btnSubmit_onclick(){
        var exercise=document.getElementById("exercise");
        var score=document.getElementById("score");
        exercise.style.display="none";
        score.style.display="block";
    }
</script>

<div align="center">
   <div style="background-color:#808080">
      <div style="height:90px;">
      <span class="title">W-M-Learning</span>
      </div>
   </div>
   
   <!--首页-->
   <div id="index">
   <div class="box">
       <ul class="list">
           <li><img class="slide" src="PIC/baltimore-1483762_960_720.jpg" height="800px" width="1100px"></li>
           <li><img class="slide" src="PIC/munich-1484414_960_720.jpg" height="800px" width="1100px"></li>
           <li><img class="slide" src="PIC/road-1480689_960_720.jpg" height="800px" width="1100px"></li>
           <li><img class="slide" src="PIC/road-1483126_960_720.jpg" height="800px" width="1100px"></li>
       </ul>
       <div class="pic">
        <a class="pic_1" style="font-size:25px;">1</a>
        <a class="pic_2" style="font-size:25px;">2</a>
        <a class="pic_3" style="font-size:25px;">3</a>
        <a class="pic_4" style="font-size:25px;">4</a>
       </div>
   </div>
   <div style="height:600px;font-size:55px;">
       <ul>
           <li class="item">
               <img src="PIC/A.jpg" width="200px">
               <a onclick="paper_onclick()">2016年6月英语四级真题</a>
           </li>
           <li class="item">
               <a onclick="paper_onclick()">2016年6月英语四级真题</a>
               <img src="PIC/B.jpg" width="200px">              
           </li>
           <li class="item">
               <img src="PIC/C.jpg" width="200px">
               <a onclick="paper_onclick()">2016年6月英语四级真题</a>
           </li>
           <li class="item">
               <a onclick="paper_onclick()">2016年6月英语四级真题</a>
               <img src="PIC/D.jpg" width="200px">
           </li>
       </ul>
   </div>
   </div>
   
   <!--个人信息-->
   <div id="infomation" style="display:none;">
   <input type="image" src="PIC/image.jpg">
   <div>
       <a style="font-size:35px;">点击修改头像</a>
       <br>
       <div style="height:900px;font-size:35px;">
           显示用户信息
           <br>           
       </div>
       <button class="btn" onclick="btnLogin_onclick()">登录</button>
   </div>
   </div>
   
   <!--练习-->
   <div id="exercise" style="display:none;">
   <div>
       <audio controls="controls" height="300">
       <source src="song.mp3" type="audio/mp3"/>
       <source src="song.ogg" type="audio/ogg"/>
       <embed height="300" src=".."/>
       </audio>
   </div>
   <div style="margin-left:auto;font-family:微软雅黑;font-size:35px;height:250px;background-color:#999999;">显示试卷题目</div>
   <button class="btn_search" onclick="btnSubmit_onclick()">提交</button>
   </div>
   
   <!--得分-->
   <div id="score" style="display:none;">
       <div style="border:1px solid #37474f;">
            <ul>
                <li style="font-size:40px;">
                    得分:
                </li>
                <li style="font-size:40px;">
                    错题个数:
                </li>
            </ul>
            <button class="btn_insert">加入错题集</button>
       </div>
   </div>
   
   <!--登录-->
   <div id="login" style="display:none;">
   <br>
   <p>登录</p>
   <div align="center">
       <table>
           <tr>
               <td>用户名:</td>
               <td><input type="text" class="txt" name="userName" placeholder="用户名"></td>
           </tr>
           <tr>
               <td>密码:</td>
               <td><input type="text" class="txt" name="userPwd" placeholder="输入密码"></td>
           </tr>
       </table>
       <br>
       <button class="btn" name="btnConfirm" onclick="btnSure_onclick()">确认</button>
       <button class="btn" name="btnRegister" onclick="btnRegister_onclick()">注册</button>
   </div>
   <br>
   快捷登录:
   <input type="image" src="PIC/wechat.jpg" width="80px" height="80px">
   <input type="image" src="PIC/user.jpg" width="80px" height="80px">
   </div>
   
   <!--注册-->
   <div id="register" style="display:none;">
   <p>注册</p>
   <div align="center">
       <table>
           <tr>
               <td>用户名:</td>
               <td><input type="text" class="txt" name="userName" placeholder="用户名"></td>
           </tr>
           <tr>
               <td>邮箱:</td>
               <td><input type="text" class="txt" name="userEmail" placeholder="邮箱"></td>
           </tr>
           <tr>
               <td>手机号码:</td>
               <td><input type="text" class="txt" name="userEmail" placeholder="邮箱"></td>
           </tr>
           <tr>
               <td>密码:</td>
               <td><input type="text" class="txt" name="userPwd" placeholder="输入密码"></td>
           </tr>
           <tr>
               <td>确认密码:</td>
               <td><input type="text" class="txt" name="userConfirm" placeholder="确认密码"></td>
           </tr>
            <tr>
            <td>选择省份:</td>
            <td>
            <script type="text/javascript" src="morecity.js" mce_src="morecity.js" class="txt"></script>
    <form class="city_title" onsubmit="manSub(this);return false;" name="spc">
        <select class="txt1" name="ddlProvince" id="ddlProvince" onchange="selectMoreCity(this)">
        </select>
        <select class="txt1" name="ddlCity" id="ddlCity">
            <option selected value="">城市</option>
        </select>
    </form>
    <script type="text/javascript" language ="javascript">
        BindProvince();//初始化省份
        BindCity();    //初始化城市
    </script>
       </td>
        </tr>
       </table>
       <br>
       <button class="btn" name="btnConfirm" onclick="btnConfirm_onclick()">确认</button>
       <button class="btn" name="btnClean">清空</button>
   </div>
   <br>
   快捷登录:
   <input type="image" src="PIC/wechat.jpg" width="80px" height="80px">
   <input type="image" src="PIC/user.jpg" width="80px" height="80px">
   </div>
   
   <!--CET4-->
   <div id="cet4" style="display:none;">
   <div style="height:250px;background-color:#942;">
       显示4级题目
   </div>
   </div>
   
   <!--CET6-->
   <div id="cet6" style="display:none;">
   <div style="height:250px;background-color:#aaa;">
       显示6级题目
   </div>
   </div>
   
   <!--professional english-4-->
   <div id="professional-4" style="display:none;">
   <div style="height:250px;background-color:#258;">
       显示专业英语题目
   </div>
   </div>
   
   <!--打赏我们-->
   <div id="reward" style="display:none;">
   <div style="height:250px;">
       <h>打赏我们(╭￣3￣)╭♡</h>
       <br>
       <br>
       <button class="btn">打赏</button>
       <br>
       <a style="font-family:宋体;">快捷打赏:</a>
       <input type="image" src="PIC/wechat.jpg" width="80px" height="80px">
   <input type="image" src="PIC/user.jpg" width="80px" height="80px">
   </div>
   </div>
   
   <!--IELTS-->
   <div id="IELTS" style="display:none;">
   <div style="height:250px;background-color:#bdcafe;">
       显示雅思题目
   </div>
   </div>
   
   <!--TOEFL-->
   <div id="TOEFL" style="display:none;">
   <div style="height:250px;background-color:#951753;">
       显示托福题目
   </div>
   </div>
   
   <!--JLPT-->
   <div id="JLPT" style="display:none;">
   <div style="height:250px;background-color:#951753;">
       显示JLPT题目
   </div>
   </div>
   
   <!--Jtest-->
   <div id="Jtest" style="display:none;">
   <div style="height:250px;background-color:#951753;">
       显示Jtest题目
   </div>
   </div>
   
   <!--more-->
   <div id="more" style="display:none;">
      <div class="more_div">
       <ul class="tileSec">
           <li class="tile1" onclick="li1_onclick()">
             <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>英语四级</h>
                    </div>
                 </div>
             </div>
           </li>
           <li class="tile2" onclick="li2_onclick()">
              <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>英语六级</h>
                    </div>
                 </div>
             </div>               
           </li>
           <li class="tile3" onclick="li3_onclick()">
              <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>专业英语</h>
                    </div>
                 </div>
             </div>              
           </li>
           <li class="tile5" onclick="li5_onclick()">
              <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>雅思</h>
                    </div>
                 </div>
             </div>               
           </li>
           <li class="tile6" onclick="li6_onclick()">
              <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>托福</h>
                    </div>
                 </div>
             </div>               
           </li>
           <li class="tile7" onclick="li7_onclick()">
              <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>JLPT</h>
                    </div>
                 </div>
             </div>               
           </li>
           <li class="tile8" onclick="li8_onclick()">
              <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>Jtest</h>
                    </div>
                 </div>
             </div>               
           </li>
           <li class="tile4" onclick="li4_onclick()">
              <div class="tableDisplay">
                 <div class="vCenter">
                    <div class="tileCon">
                        <h>打赏我们</h>
                    </div>
                 </div>
             </div>               
           </li>
       </ul>
       </div>
   </div>
   
   <!--search-->
   <div id="search" style="display:none;">
       <input type="text" class="txt_search" placeholder="  查找试卷">
       <br>
       <button class="btn_search" onclick="search_onclick()">搜索</button>
   </div>
   
   <!--search_result-->
   <div id="search_result" style="display:none;">
       显示搜索结果
   </div>
   
   <!--footer-->
   <div style="position:fixed; bottom:0px;background-color:rgba(80,80,80,.8);width:100%;">
      <input type="image" src="PIC/index.png" border="0" height="100px" onclick="imgIndex_onclick()">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="image" src="PIC/menu-button-bg.png" border="0" height="100px" onclick="imgMore_onclick()">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="image" src="PIC/icon-search.png" border="0" height="100px" onclick="imgSearch_onclick()">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="image" src="PIC/icon-user.png" border="0" height="100px" onclick="imgUser_onclick()">      
   </div>
</div>
</body>
</html>